﻿<phone:PhoneApplicationPage 
    x:Class="TimeTracker.PhoneApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TimeTracker.Phone.Converters;assembly=TimeTracker.Phone.Core"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">
    
    <phone:PhoneApplicationPage.Resources>

        <local:RelativeDateTimeConverter x:Name="RelativeDateTimeConverter" />

        <!-- The template for task items -->
        <DataTemplate x:Key="taskItemTemplate">
            <StackPanel Orientation="Horizontal">

                <!--Replace rectangle with image-->
                <Image Height="80" Width="80" Source="{Binding IsActiveImage}" VerticalAlignment="Top" Margin="0,12,-4,0" Tap="Image_Tap" />

                <StackPanel>
                    <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}"/>
                    <TextBlock Text="{Binding CompleteProject}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}"/>
                    <TextBlock Text="{Binding LastStartTime, Converter={StaticResource RelativeDateTimeConverter}}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSmallStyle}"/>
                </StackPanel>

            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="groupHeaderTemplate">
            <Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}">
                <TextBlock Text="{Binding Key}"/>
            </Border>
        </DataTemplate>
        
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
 
        <!--Panorama control-->
        <controls:Panorama Title="Time tracker">

            <controls:Panorama.TitleTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="100" Margin="0,50,0,-20" />
                </DataTemplate>
            </controls:Panorama.TitleTemplate>

            <controls:Panorama.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" FontSize="60" Margin="0,0,0,0" />
                </DataTemplate>
            </controls:Panorama.HeaderTemplate>

            <!--Panorama item one-->
            <controls:PanoramaItem Header="Recent">
                <ListBox Margin="{StaticResource PhoneTouchTargetOverhang}"
                         ItemsSource="{Binding SortedItems}"
                         ItemTemplate="{StaticResource taskItemTemplate}"/>
            </controls:PanoramaItem>
 
            <!--Panorama item two-->
            <!--Use 'Orientation="Horizontal"' to enable a panel that lays out horizontally-->
            <controls:PanoramaItem Header="Projects">
                <toolkit:LongListSelector ItemsSource="{Binding GroupedItems}" 
                                              ItemTemplate="{StaticResource taskItemTemplate}" 
                                              GroupHeaderTemplate="{StaticResource groupHeaderTemplate}" />
            </controls:PanoramaItem>
        </controls:Panorama>
    </Grid>
</phone:PhoneApplicationPage>